<template>
  <div class="content-item">
    <TableModel :table-data="deviceData" :loading="loading" :is-show-select=false>
      <el-table-column prop="name" label="设备名称"></el-table-column>
<!--      <el-table-column prop="deviceSn" label="序列号"></el-table-column>-->
      <el-table-column prop="companyName" label="企业名称"></el-table-column>
      <el-table-column prop="deviceType" label="设备用途"></el-table-column>
      <el-table-column prop="address" label="设备地址"></el-table-column>
      <el-table-column prop="bidName" label="标段"></el-table-column>
      <el-table-column prop="areaName" label="所属工区"></el-table-column>
      <el-table-column prop="deviceStatus" label="在线状态"></el-table-column>
<!--      <el-table-column prop="ip" label="IP地址"></el-table-column>-->
<!--      <el-table-column prop="agent" label="代理"></el-table-column>-->
      <el-table-column prop="createTime" label="添加时间"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </TableModel>
    <Pagination :pageData="pageData" @pageNum="pageNumData" @pageSize="pageSizeData"></Pagination>
  </div>
</template>

<script>
import Pagination from "../Pagination";
import TableModel from "../../models/TableModel";
import HttpInterface from "../../../util/httpInterface";
import Constants from "../../../util/constants";
import { mapState } from "vuex";
import { messageBox } from "../../../util/utils";

export default {
  components: {
		Pagination, TableModel
	},
  data() {
    return {
      loading: false,
			deviceData: [],
			pageData: {
        total: 0,
        pageNum: 1,
        pageSize: 20
      }
		};
  },

  computed: {
    ...mapState(["biaoduanList", "workAreaList"])
  },

  methods: {
    pageNumData (page) {
      this.pageData.pageNum = Number(page);
      this.getDeviceFaceList();
    },

    pageSizeData (page) {
      this.pageData.pageSize = Number(page);
      this.getDeviceFaceList();
    },

    // 获取列表数据
    getDeviceFaceList () {
      this.loading = true;
      let { workAreaList, biaoduanList, pageData } = this;
      let _this = this;
      let parmas = {
        pageNum: pageData.pageNum,
        pageSize: pageData.pageSize,
        type: Constants.DEVICE_FACE
      }
      HttpInterface.requestGet(this, HttpInterface.URL_DEVICE_LIST, parmas, function(response) {
        var { code, data, total } = response.data;
        data.forEach(item => {
          item.deviceStatus = Constants.DEVICE_STATUS[item.isOnline];
          item.deviceType = Constants.INOUT_ENTRANCE_LIST[item.inOutType];

          biaoduanList.forEach(key => {
            if (item.bidSection == key.id) item.bidName = key.name;
          })

          workAreaList.forEach(key => {
            if (item.areaId == key.id) item.areaName = key.name;
          })
        })
        _this.deviceData = data.reverse();
        _this.pageData.total = total;
        _this.loading = false;
      }, function (err) {
        _this.loading = false;
        _this.errorMessage("加载失败！");
      })
    },

    handleEdit(row) {
      this.$emit("deviceInfo", row.id);
    },

    handleDelete(row) {
      let _this = this;
      messageBox(() => {
        let parmas = {
          id : row.id
        }
        HttpInterface.requestPost(this, HttpInterface.URL_DEVICE_DELETE, parmas, function (response) {
          var { success } = response.data;
          if (success) {
            _this.$message.success("删除成功!");
            _this.getDeviceFaceList();
          } else {
            _this.errorMessage("删除失败！");
          }
        }, null, true)
      })
    }
	}
};
</script>

<style  scoped>

</style>
